<template>
  <a-modal v-model="visible" :title="title" :width="1400" wrapClassName="full-modal" @ok="handleOk">
    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-item label="搜索类型" style="display: flex; align-items: center">
            <div style="display: flex">
              <a-select v-model="queryParam.searchType" placeholder="请选择" style="width: 160px">
                <a-select-option v-for="(item, index) in condition.searchTypeList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
              <a-input v-model="queryParam.searchValue" placeholder="请输入" style="margin-left: 5px" />
            </div>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-item label="品牌">
            <a-select v-model="queryParam.brandList" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" mode="multiple" show-search style="width: 220px">
              <a-select-option v-for="(item, index) in condition.brandList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-item label="素材类型">
            <a-select v-model="queryParam.channelType" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" style="width: 200px">
              <a-select-option v-for="(item, index) in condition.typeList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="12">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="reset">重置</a-button>
            <a-button style="margin-left: 20px" type="primary" @click="search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <div>
      <div class="list-box">
        <a-radio-group v-model="materialItem" class="radio-group-box" v-if="tableData.length != 0">
          <a-radio :style="radioStyle" :value="item.lookId" class="radio-box" v-for="(item, index) in tableData" :key="index">
            <a-card hoverable style="width: 160px" :bordered="false">
              <template #cover>
                <img class="image" alt="example" :src="item.backgroundImage" />
              </template>
              <p>{{ item.name }}</p>
              <p>ID: {{ item.lookId }}</p>
            </a-card>
          </a-radio>
        </a-radio-group>
        <a-empty style="margin: 200px 0" v-else />
        <div class="button-box">
          <a-button v-if="queryParam.current > 1" @click="hanleTab('previous')">上一页</a-button>
          <a-button style="margin-left: 20px" v-if="totalPage > 1 && queryParam.current < totalPage" @click="hanleTab('next')">下一页</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { conditionTaskList, themeList2 } from '@/api/pos/match'
export default {
  props: {
    material: {
      typeof: String
    }
  },
  data() {
    return {
      visible: false,
      title: '选择素材',
      queryParam: {
        channelType: 'retailTheme',
        size: 10,
        current: 1
      },
      totalPage: 0,
      condition: {},
      materialItem: '',
      radioStyle: '',
      tableData: []
    }
  },
  mounted() {},
  methods: {
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      const that = this
      if (this.materialItem) {
        this.tableData.forEach(item => {
          if (item.lookId == this.materialItem) {
            let obj = {}
            Object.assign(obj, {
              backgroundImage: item.backgroundImage,
              lookId: item.lookId,
              themeId: item.id,
              name: item.name
            })
            that.$emit('selectdMaterial', obj)
          }
        })
      }
      this.visible = false
    },
    show() {
      if (this.material) {
        this.materialItem = this.material
      } else {
        this.materialItem = ''
      }
      this.conditionTaskList()
      this.postCondition()
      this.visible = true
    },
    hanleTab(val) {
      if (val == 'previous') {
        this.queryParam.current--
      } else {
        this.queryParam.current++
      }
      this.conditionTaskList()
    },
    conditionTaskList() {
      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      const data = {}
      data.themeListQto = queryParam
      return themeList2(data.themeListQto).then(res => {
        if (res.code === 200) {
          const pagination = { ...this.pagination }
          pagination.pageSize = res.data.size
          pagination.total = res.data.total
          this.pagination = pagination
          this.tableData = res.data.records
          this.totalPage = parseInt(pagination.total / pagination.pageSize) + 1
        }
      })
    },
    postCondition() {
      let params = {}
      conditionTaskList(params).then(res => {
        if (res.code == 200) {
          this.condition = res.data
        }
      })
    },
    reset() {
      this.queryParam = {
        channelType: 'retailTheme',
        size: 10,
        current: 1
      }
      this.conditionTaskList()
    },
    search() {
      this.queryParam.current = 1
      this.conditionTaskList()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-radio-inner {
  border-radius: 0;
}
/deep/ .ant-radio-checked:after {
  animation-play-state: paused;
  border-radius: 0;
  border: 0;
}

/deep/ .ant-card-cover {
  width: 160px;
  height: 240px !important;
  display: flex;
  align-items: center;
}
/deep/ .ant-card-body{
  padding: 20px 5px 0 5px;
  box-sizing: border-box;
}
/deep/ .ant-card-body p{
  max-width: 150px;
  white-space:normal;
  word-wrap:break-word;
}
.image {
  max-height: 240px !important;
}

/deep/ .ant-modal-content {
  height: 800px;
  overflow-y: scroll;
}

.radio-group-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.radio-box {
  display: flex;
  margin-right: 40px;
  margin-top: 30px;
}

p {
  color: #999;
}
.button-box {
  display: flex;
  justify-content: right;
}
</style>